<template>
	<view class="content b-t">
		<list-cell title="反馈类型" :tips="listTips" @eventClick="chooseType('feedBackType')"></list-cell>
		<textarea v-model="textareaCon" placeholder="有什么想说的尽管提～" class="font28"/>
		<view class="upload">
			<view class="upload-imgs" v-for="(item,index) in submitImages" :key="item">

				<image src="../../static/useCenter/delete-img.png" class="delete-img" @click="deleteImg(index)"></image>
				<image :src="item" :key="item" class="choose-image" ></image>
			</view>
			<view class="uploads-add" @click="chooseImage" v-show="!hideUploadImg">
				<image src="../../static/useCenter/add-img.png" class="img" ></image>
			</view>
		</view>
		<button class="add-btn" @click="submit">提交</button>
		<uni-popup ref="image" type="center" :custom="true" >
			<view class="uni-image">
				<image class="image" :src="popImage" mode="" style="width: 80rpx;height: 80rpx;"/>
				<view class="font34 colorfont">
					{{showToastTips}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import listCell from '@/components/mix-list-cell';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			listCell,
			uniPopup
		},
		data() {
			return {
				imageSrc:[],//
				listTips:'请选择类型',
				tipsValue:0,
				submitImages:[],//上传的图片
				textareaCon:'',//备注
				hideUploadImg:false,//隐藏上传按钮
				showToastTips:'',
				popImage:''
			}
		},
		onLoad(option) {
			
		},
		methods: {
			// 选择类型
			chooseType(url){
				this.$Router.push({
					name: url,
				})
			},
	
			submit() {
				const { $requestApi,submitImages,textareaCon,tipsValue,$api,$http } = this;
				if (!tipsValue) {
					this.popImage = '/static/useCenter/error.png';
					this.$refs['image'].open();
					this.showToastTips='请选择类型'
					return;
				}
				
				if (!textareaCon) {
					this.popImage = '/static/useCenter/error.png';
					this.$refs['image'].open();
					this.showToastTips='请填写反馈内容'
					return;
				}
				let objData = {}
				if (submitImages.length==0) {
					objData = {
						typeid: tipsValue,
						content: textareaCon,
						clientid:1
					}
				}else{
					objData = {
						typeid: tipsValue,
						content: textareaCon,
						images:submitImages,
						clientid:1
					}
				}
				
				$http.request({
					method: 'POST', // 请求方法必须大写
					url: $requestApi.feedBackAdd,
					data: objData
				})
				.then(result => {
					let _data = result.data;
					if (_data.code === 200) {
						this.popImage = '/static/useCenter/login-success.png';
						this.$refs['image'].open();
						this.showToastTips='提交成功，谢谢您的反馈'
						setTimeout(() => {
							this.$Router.back(1)
						}, 1000)
					}
				})
				.catch(err => {
					console.log(err);
				});
			},
			// 上传图片
			chooseImage() {
				const { $requestApi,submitImages,$test,imageSrc} = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res)
						var imageSrcFile = res.tempFilePaths[0];
						
						$test.upload($requestApi.upfils, {
						    // files: [], // 仅5+App支持
						    filePath: imageSrcFile, // 要上传文件资源的路径。
						    name: 'upfile', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
						    header: {},
						    formData: {
								name:'feedBack'
							}, 
						}).then(res => {
							submitImages.push(JSON.parse(res.data).result.full_url);
							if(submitImages.length==6){
								this.hideUploadImg=true;
							}
						}).catch(err => {
							uni.showModal({
								content: err.errMsg,
								showCancel: false
							});
						})
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
			// 删除图片
			deleteImg(index){
				this.submitImages.splice(index,1)
			},
		}
	}
</script>

<style lang='scss'>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: 120upx;
	}
	textarea{
		height: 260upx;
		width: 690upx;
		margin: 20upx auto;
	}
	.upload{
		width: 690upx;
		margin: 30upx auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap:  wrap;
		.uploads-add{
			width: 30%;
			height: 200upx;
			.img{
				width: 100%;
				height: 100%;
				
			}
		}
		.upload-imgs{
			width: 30%;
			height: 200upx;
			margin: 0 3% 20upx 0;
			position: relative;
			.delete-img{
				position: absolute;
				right: -10upx;
				top: -10upx;
				width: 30upx;
				height: 30upx;
			}
			.choose-image{
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}
		}
		
	}

	
	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		color: #fff;
		border-radius: 49upx;
		background: linear-gradient(86deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
		box-shadow: 0upx 10upx 30upx rgba(255, 68, 0, 0.2);
	}
</style>
